<template>
  <el-form ref="studentForm" :model="form" label-width="80px" style="margin-top: 20px">
    <el-form-item class="form-item" label="姓名:" :required="true">
      <el-input
        v-model="form.name"
        :class="nameStyle"
        maxlength="6"
        show-word-limit
        type="text"
        placeholder="输入教师名称"
        style="width: 200px;"
        @blur="validName"
      />
      <span>{{ nameTip }}</span>
    </el-form-item>
    <el-form-item class="form-item" label="密码:" :required="true">
      <el-input
        v-model="form.password"
        :class="pwdStyle"
        type="text"
        maxlength="6"
        show-word-limit
        placeholder="输入密码"
        style="width: 200px;"
        @blur="validPwd"
      />
      <el-button
        type="primary"
        plain
        style="margin-left: 5px"
        @click="randomPwd"
      >
        生成随机密码
      </el-button>
      <span>{{ pwdTip }}</span>
    </el-form-item>
    <el-form-item class="form-item" label="头像:" :required="true">
      <uploader
        :width="120"
        :height="120"
        :oss="'member'"
        :url="form.avatar"
        @callback="avatarCallback"
      />
    </el-form-item>
    <el-button
      type="primary"
      :loading="loading"
      style="margin-left: 80px;width: 200px"
      @click="create"
    >创建教师
    </el-button>
  </el-form>
</template>

<script>
import { validName, validPwd } from '../../utils/validate'
import { createTeacher } from '../../api/teacher'
import Uploader from '../course/module/Upload'
export default {
  name: 'Create',
  components: { Uploader },
  data() {
    return {
      loading: false,
      nameTip: '',
      pwdTip: '',
      nameStyle: '',
      pwdStyle: '',
      form: {
        name: '',
        password: '',
        avatar: 'member/avatar.gif'
      }
    }
  },
  methods: {
    avatarCallback(url) {
      this.form.avatar = url
    },
    validName: function() {
      if (validName(this.form.name)) {
        this.nameTip = ''
        this.nameStyle = 'success'
        return true
      } else {
        this.nameTip = '不能包含特殊字符'
        this.nameStyle = 'danger'
        return false
      }
    },
    validPwd: function() {
      if (validPwd(this.form.password)) {
        this.pwdTip = ''
        this.pwdStyle = 'success'
        return true
      } else {
        this.pwdTip = '密码需由6-16位数字或英文组合'
        this.pwdStyle = 'danger'
        return false
      }
    },
    randomPwd: function() {
      this.form.password = Math.random().toString().slice(-6)
      this.validPwd()
    },
    create: function() {
      if (this.validName() && this.validPwd()) {
        this.loading = true
        createTeacher(this.form).then(() => {
          this.$SUCCESS('教师创建成功')
          this.pwdTip = ''
          this.pwdStyle = ''
          this.nameTip = ''
          this.nameStyle = ''
          this.form = this.$options.data().form
          this.loading = false
        }).catch(() => {
          this.$ERROR('教师创建失败')
          this.loading = false
        })
      }
    }
  }
}
</script>

<style scoped>
span{
    color: rgb(251,114,153);
    margin-left: 10px
}
.form-item{
    display: block;
    margin-bottom: 30px;
}
.success /deep/ input{
    border-color: #67c23a;
}
.danger /deep/ input{
    border-color: #f56c6c;
}
</style>
